<!-- 登录 -->
<script setup lang='ts'>
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/admin/user'
import useMenuStore from '@/store/modules/admin/menu'
import { useRouter } from 'vue-router';
import { RuleForm } from "./type";
import { rules } from './rules'
import { ElNotification } from 'element-plus';
import type { FormInstance } from 'element-plus';
//引入获取当前时间的函数
import { getTime } from '@/utils/time';

// pinia
const userStore = useUserStore();
const menuStore = useMenuStore();
// 路由
const $router = useRouter();
// loading
let loading = ref<Boolean>(false);
// ref
const loginFormRef = ref<FormInstance>()
// 表单数据
let LoginForm = ref<RuleForm>({
    username: '',
    password: '',
})

const login = async (formEl: FormInstance | undefined) => {
    // 保证验证通过
    if (!formEl) return
    await formEl.validate();
    // 验证通过
    loading.value = true;
    try {
        // 获取用户信息
        let token: string = await userStore.userLogin(LoginForm.value);
        // 获取菜单信息
        await menuStore.userMenu({ token });
        $router.push('/');
        ElNotification({ message: '欢迎回来', title: `HI,${getTime()}好`, type: 'success' })
    } catch (error) {
        ElNotification({ message: (error as Error).message, type: 'error' })
    } finally {
        loading.value = false;
    }
};

</script>

<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <!-- 登录的表单 -->
                <el-form class="login_form" :model="LoginForm" :rules="rules" ref="loginFormRef">
                    <h1>Hello</h1>
                    <h2>欢迎来到红浪漫</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="LoginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="LoginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_btn" type="primary"
                            @click="login(loginFormRef)">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<style lang='less' scoped>
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url("@/assets/images/login_form.png") no-repeat;
        background-size: cover;
        padding: 40px;

        h1 {
            color: white;
            font-size: 40px;
        }

        h2 {
            font-size: 20px;
            color: white;
            margin: 20px 0px;
        }

        .login_btn {
            width: 100%;
        }
    }
}
</style>@/store/modules/admin/user